<template>
    <div>
        I'm child~~~ <br/>
        <router-link to="/none">{{msg}}</router-link>
        <button @click="addList">{{addtitle}}</button>
        <button @click="modify">{{modifyinfo}}</button>
        <button @click="update">{{updateinfo}}</button>
        <button @click="updateAscy">Actions 测试</button>
        <button @click="updatePromise">Actions Promise 测试</button>
        <br/>
        <span>data : {{get(5)}}</span><br/>
        <span>All Data : {{all}}</span>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
    name: 'test',
    data() {
        return {
            msg: 'I\'m child',
            addtitle: '添加一个',
            modifyinfo: '修改信息',
            updateinfo: 'promise 添加信息'
        }
    },
    computed: {
        clickMy () {
            return this.$store.getters.getInfoById(5)
        },
        ...mapGetters({
            get: 'getInfoById',
            all: 'getList'
        })
    },
    methods:{
        addList() {
            this.$store.commit('modifyList')
        },
        modify() {
            this.$store.commit('testModify', {id: 1, title: 'hu diao diao'})
        },
        promise() {
            return new Promise((resolve, reject) => {
                // 模拟异步操作
                setTimeout(()=>{
                    console.info('异步执行操作开始了。。。。。')
                    resolve({id: 7, title: 'promise add object', bool: true})
                }, 2000)
            })
        },
        update() {
            this.promise().then((obj) => {
                console.info('准备添加数据')
                this.$store.commit('updateList', obj)
            })
        },
        updateAscy() {
            this.$store.dispatch('increment')
        },
        updatePromise() {
            this.promise().then(data => {
                
                this.$store.dispatch('incrementObj', data)
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
